<template>
  <div class="w-90% bg-slate-50 rounded-xl p-xy">
    <div class="flex items-center">
      <!--  LOGO-->
      <el-icon :size="20">
        <slot></slot>
      </el-icon>
      <span class="text-sm font-semibold text-slate-600 ml-2">{{ title }}</span>
    </div>

    <el-table class="mt-2" :data="data">
      <template v-for="item in columns">
        <el-table-column :label="item.label" :prop="item.prop"></el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
export type TableInfoColumn = {
  label: string,
  prop: string
}

let {title, columns} = defineProps<{
  title: string,
  columns: Array<TableInfoColumn>,
  data: any[]
}>();
</script>

<style scoped>
</style>